<%--
  Created by IntelliJ IDEA.
  User: 懒瑶瑶
  Date: 2022/5/10
  Time: 8:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>添加员工</title>
    <%--    引入css、js--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>

    <script>
        layui.use(['form', 'laydate', 'layer'], function () {
            var form = layui.form, laydate = layui.laydate, layer = layui.layer;
            //定义自定义验证规则
            form.verify({
                v_notallnum:function (val,item) {
                    if (/^\d+\d+\d$/.test(val)){
                        return "内容不能全为数字"
                    }
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(val)) {
                        return '姓名不能包含特殊字符！';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(val)) {
                        return '姓名首尾不能出现下划线\'_\'！';
                    }
                },
                v_pass:[
                    /^[\S]{6,12}$/,
                    '长度需要在6-12之间'
                ],
                newmobile: function(value){
                    if(value.length != 11){
                        return '新手机号必须为11位合法数字';
                    }
                    var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
                    if(reg.test(value)){
                        // return '手机号码格式正确';
                    }else{
                        return '非法手机号';
                    }
                },
                numberQq: function(value){
                    if(!/(^$)|^\d+$/.test(value)){
                        return 'QQ号码格式错误';
                    }
                },
                emaliReg: function(value){
                    if(!/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)){
                        return '邮箱格式错误';
                    }
                },
                num_sz:[
                    /(^$)|^\d+$/,
                    '只能填写数字'
                ],
            });
            laydate.render({
                elem:'#datetime',
                type:'date' //指定
            });
            laydate.render({
                elem:'#datetime2',
                type:'date' //指定
            });
            laydate.render({
                elem:'#datetime3',
                type:'date' //指定
            });
            //监听表单的提交
            <%--form.on('submit(formBtn)',function () {--%>
            <%--    $("#form1").ajaxSubmit({--%>
            <%--        type: 'post',--%>
            <%--        url:'${pageContext.request.contextPath}/emp/addemp',--%>
            <%--        // success:function (d) {--%>
            <%--        //     var index = parent.layer.getFrameIndex(window.name);--%>
            <%--        //--%>
            <%--        //     form.render();--%>
            <%--        // }--%>
            <%--    });--%>
            <%--    parent.layer.close(index);--%>
            <%--    parent.layui.table.reload('dome');--%>
            <%--});--%>
            //监听表单的提交
            form.on('submit(formBtn)',function () {
                alert("修改中。。。")
                $("#form1").ajaxSubmit({
                    type: "post",
                    url:'${pageContext.request.contextPath}/emp/empupd',
                    success:function (data) {

                        setTimeout(function(){
                            alert('修改成功！',{icon:6,offset:"auto",time:2000});//提示框
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);//关闭弹出层
                            parent.location.reload();//重新加载父页面表格
                        }, 1100);
                    //     var index = parent.layer.getFrameIndex(window.name);
                    //     parent.layer.close(index);
                    //     // parent.layer.closeAll();
                    //     parent.layui.table.reload('demo');
                    //     // form.render();
                    },
                });
                return false;
            });
            //页面加载完毕
            $(function () {
                $.post("${pageContext.request.contextPath}/emp/toupdemp/${empId}",function (data) {
                form.val('form1',${emp});
                form.render();
                });
            });
        });
    </script>
</head>
<body>
<form class="layui-form" id="form1"  lay-filter="form1" enctype="multipart/form-data" >
<%--编号--%>
    <input type="hidden" name="empId" class="layui-input">

    <%--    姓名--%>
    <div class="layui-form-item">
        <label class="layui-form-label" >姓名：</label>
        <div class="layui-input-inline">
            <input type="text" name="empName" class="layui-input" placeholder="请输入姓名" lay-verify="required|v_notallnum"/>
        </div>
        <span style="font-size: 10px;color: red">※</span>
    </div>

    <%--        性别--%>
    <div class="layui-form-item">
        <label class="layui-form-label">性别：</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked />
            <input type="radio" name="sex" value="女" title="女" />
            <span style="font-size: 10px;color: red;margin-left: 64px">※</span>
        </div>

    </div>
    <%--        出生日期--%>
    <div class="layui-form-item">
        <label class="layui-form-label">出生日期：</label>
        <div class="layui-input-inline">
            <input type="text" id="datetime" name="birthday" class="layui-input" lay-verify="required|data" />
        </div>
        <span style="font-size: 10px;color: red">※</span>
    </div>
    <%--        身份证号--%>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号：</label>
        <div class="layui-input-inline">
            <input type="text" name="cardNo" class="layui-input" placeholder="身份证号码" lay-verify="identity"/>
        </div>
        <span style="font-size: 10px;color: red">※</span>
    </div>
    <%--        籍贯--%>
    <div class="layui-form-item">
        <label class="layui-form-label">籍贯：</label>
        <div class="layui-input-inline">
            <input type="text" name="nation" class="layui-input" placeholder="请输入籍贯" lay-verify="required"  />
        </div>
        <span style="font-size: 10px;color: red">※</span>
    </div>
    <%--        电话--%>
    <div class="layui-form-item">
        <label class="layui-form-label">电话：</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" class="layui-input" placeholder="请输入电话" lay-verify="required|newmobile" />
        </div>
        <span style="font-size: 10px;color: red">※</span>
    </div>
    <%--        入职日期--%>
    <div class="layui-form-item">
        <label class="layui-form-label">入职日期：</label>
        <div class="layui-input-inline">
            <input type="text" id="datetime2" name="hireDay" class="layui-input" lay-verify="required|date"/>
        </div>
        <span style="font-size: 10px;color: red">※</span>
    </div>
    <%--        离职日期--%>
    <div class="layui-form-item">
        <label class="layui-form-label">离职日期：</label>
        <div class="layui-input-inline">
            <input type="text" id="datetime3" name="fireDay" class="layui-input" lay-verify="required|date"/>
        </div>
        <span style="font-size: 10px;color: red">※</span>
    </div>
    <%--     部门--%>
    <div class="layui-form-item">
        <label class="layui-form-label">部门：</label>
        <div class="layui-input-inline">
            <select name="depId">
                <c:forEach items="${dlist}" var="s">
                    <option value="${s.depid}">${s.depName}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <%--        职务--%>
    <div class="layui-form-item">
        <label class="layui-form-label">职务：</label>
        <div class="layui-input-inline">
            <select name="postId">
                <c:forEach items="${plist}" var="s">
                    <option value="${s.postId}">${s.postName}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <%--        QQ号码--%>
    <div class="layui-form-item">
        <label class="layui-form-label">QQ号码：</label>
        <div class="layui-input-inline">
            <input type="text" name="qqCode" class="layui-input" placeholder="请输入QQ号码" lay-verify="numberQq"/>
        </div>
    </div>
    <%--        微信--%>
    <div class="layui-form-item">
        <label class="layui-form-label">微信：</label>
        <div class="layui-input-inline">
            <input type="text" name="weixin" class="layui-input" placeholder="请输入微信号/手机号" />
        </div>
    </div>
    <%--        邮箱--%>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱：</label>
        <div class="layui-input-inline">
            <input type="text" name="email" class="layui-input" placeholder="请输入邮箱" lay-verify="emaliReg"/>
        </div>
    </div>
    <%--        婚姻状况--%>
    <div class="layui-form-item">
        <label class="layui-form-label">婚姻状况：</label>
        <div class="layui-input-block">
            <input type="radio" name="married" value="未婚" title="未婚" checked />
            <input type="radio" name="married" value="已婚" title="已婚" />
            <input type="radio" name="married" value="离异" title="离异" />
            <input type="radio" name="married" value="丧偶" title="丧偶" />
        </div>
    </div>
    <%--        毕业学校--%>
    <div class="layui-form-item">
        <label class="layui-form-label">毕业学校：</label>
        <div class="layui-input-inline">
            <input type="text" name="university" class="layui-input" placeholder="请输入学校名称"/>
        </div>
    </div>
    <%--        专业--%>
    <div class="layui-form-item">
        <label class="layui-form-label">专业：</label>
        <div class="layui-input-inline">
            <input type="text" name="major" class="layui-input" placeholder="请输入专业名称"/>
        </div>
    </div>
    <%--        学历--%>
    <div class="layui-form-item">
        <label class="layui-form-label">学历：</label>
        <div class="layui-input-inline">
            <input type="text" name="education" class="layui-input" placeholder="中专/高中/大专/研究生等"/>
        </div>
    </div>
    <%--        地址--%>
    <div class="layui-form-item">
        <label class="layui-form-label">家庭地址：</label>
        <div class="layui-input-inline">
            <input type="text" name="address" class="layui-input" placeholder="省/市/县"/>
        </div>
    </div>
    <%--        说明--%>
    <div class="layui-form-item">
        <label class="layui-form-label">说明：</label>
        <div class="layui-input-inline">
            <input type="text" name="remark" class="layui-input" placeholder="不用太详细"/>
        </div>
    </div>
    <%--        开户银行--%>
    <div class="layui-form-item">
        <label class="layui-form-label">开户银行：</label>
        <div class="layui-input-inline">
            <input type="text" name="bank" class="layui-input" placeholder="工商/招商/农业等"/>
        </div>
    </div>
    <%--        账户名称--%>
    <div class="layui-form-item">
        <label class="layui-form-label">账户名称：</label>
        <div class="layui-input-inline">
            <input type="text" name="accountName" class="layui-input" placeholder="请输入账户名称"/>
        </div>
    </div>
    <%--        账号--%>
    <div class="layui-form-item">
        <label class="layui-form-label">银行卡号：</label>
        <div class="layui-input-inline">
            <input type="text" name="bankNumber" class="layui-input" placeholder="请输入银行卡号"  lay-verify="num_sz"/>
        </div>
    </div>
    <%--        支付宝账号--%>
    <div class="layui-form-item">
        <label class="layui-form-label">支付宝：</label>
        <div class="layui-input-inline">
            <input type="text" name="alipay" class="layui-input" placeholder="请输入支付宝账号" />
        </div>
    </div>

    <%--        密码--%>
    <input name="password"  type="hidden" value="${emp.password}" />
<%--    <div class="layui-form-item">--%>
<%--        <label class="layui-form-label">密码：</label>--%>
<%--        <div class="layui-input-inline">--%>
<%--            &lt;%&ndash;                disabled readonly class="layui-input layui-disabled" placeholder="默认密码:123456"&ndash;%&gt;--%>
<%--            <input type="text" name="password" disabled readonly class="layui-input layui-disabled" placeholder="默认密码:123456"/>--%>
<%--        </div>--%>
<%--    </div>--%>
    <%--        状态--%>
    <div class="layui-form-item">
        <label class="layui-form-label">状态：</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="启用" checked />
            <input type="radio" name="status" value="2" title="禁用" />
        </div>
    </div>

    <%--        头像--%>
    <div class="layui-form-item">
        <label class="layui-form-label">当前头像：</label>
        <img style="width: 50px;height: 50px" src="${pageContext.request.contextPath}${emp.headImg}" />
    </div>
    <%--        头像--%>
<%--    <div class="layui-form-item">--%>
<%--        <label class="layui-form-label">换头像：</label>--%>
<%--        <input  style="width: 150px" type="file" id="file" name="file"/>--%>
<%--    </div>--%>
    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal  layui-btn-sm" id="test1" style="margin-left: 30px">换头像</button>
            <input name="headImg"  type="hidden" value="${emp.headImg}" />
            <img  name="file" style="width: 50px;height: 50px;margin-left: 18px" class="layui-upload-img" id="demo1">

        </div>
    </div>


    <%--        提交--%>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="formbtn" class="layui-btn" lay-submit lay-filter="formBtn">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>--%>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            // ,progress: function(n, elem, e){
            //     element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
            //     if(n == 100){
            //         layer.msg('上传完毕', {icon: 1});
            //     }
            // }
        });
    });
</script>
</body>
</html>
